
.home-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: calc(100vh - 57px);
  //overflow: scroll
  overflow-y: auto; /* 添加垂直滚动条 */

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: lightskyblue;
  }

  &::-webkit-scrollbar-track {
    background: white;
  }

  &::-webkit-scrollbar-thumb {
    background: skyblue;
    border-radius: 35px;
  }


  .home-main-box {
    display: flex;
    width: 100%;
    margin: 0 32px;
    
    .card-box {
      flex: 6;

      // 轮播图
      .carousel-big-box {
        overflow: hidden;

        .carousel-box {
          height: 455px;
          border-radius: 8px;
          margin-top: 20px;
          position: relative;
          box-shadow: 0 0 10px rgb(231 198 198 / 76%);
  
          & > img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-position: center center;
            object-fit: cover;
          }
  
          .arrows-box {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
  
            .arrows-show{
              transform: scale(1.2);
              transition: .3s ease-in-out;
              font-size: 30px;
              font-weight: 800;
              color: rgb(241, 119, 140);
              opacity: .7;
            }
  
            .arrows-show:hover {
               opacity: 1;
               transform: scale(1.5);
            }
  
            #arrows-left {
              width: 50px;
              height: 100%;
              border-radius: 8px 0 0 8px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
  
            #arrows-right {
              width: 50px;
              height: 100%;
              border-radius: 0 8px 8px 0;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
  
          .carousel-dot-box {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: end;
            width: 100%;
            height: 30px;
            bottom: 0;
  
            .dots {
              background: #ffffffba;
              margin: 0 10px;
              border-radius: 50px;
              width: 50px;
              height: 8px;
              transition: .3s ease-in-out;
              transform: scale(1);
              box-shadow: 0 0 20px rgb(241, 194, 194);
            }
  
            .dots-index {
              background: #fd8ea1;
              margin: 0 10px;
              border-radius: 50px;
              width: 50px;
              height: 8px;
              transition: .3s ease-in-out;
              transform: scale(1);
              box-shadow: 0 0 20px rgb(241, 194, 194);
            }
  
            .dots:hover {
              background: #fd8ea1;
              transform: scale(1.1);
            }
          }
        }
      }


      // 文章样式
      .home-card {
        box-sizing: border-box;
        display: flex;
        //width: 100%;
        height: 252px;
        margin-top: 20px;
        background: #fffffff1;
        border-radius: 8px;
        box-shadow: 0 0 10px rgb(231 198 198 / 76%);
        transition: box-shadow 0.3s ease, transform 0.3s ease;

        &:hover {
          transform: translateY(-5px); /* 鼠标悬停时有轻微上浮效果 */
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影加深 */
        }

        /* 左边图片盒子样式 */

        .home-card-left-box {
          flex: 0 0 auto;
          height: 252px;
          overflow: hidden;
          width: 440px;

          & > img {
            width: 100%; /* 图片宽度占满容器 */
            height: 100%; /* 图片高度占满容器 */

            /* 图片自适应填充容器，保持比例，覆盖整个区域 */

            object-fit: cover;
            object-position: center center; /* 图片居中显示 */
            border-radius: 8px 0 0 8px;
            transition: 0.5s ease-in-out;
            transform: scale(1);


            &:hover {
              transform: scale(1.1);
            }
          }
        }

        /* 右边文章盒子内容样式 */

        .home-card-right-box {
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          height: 252px;
          padding: 20px 22px;
          justify-content: center;
          overflow: hidden;

          .card-text-title {
            display: flex;
            align-items: center;
            height: 50px;

            /* 标题盒子 */

            & > span {
              width: 30ch;
              overflow: hidden;
              font-size: 25px;
              font-weight: 800;
              text-overflow: ellipsis; /* 超出部分使用省略号表示 */
              line-clamp: 1;
              white-space: nowrap;
            }

          }

          /* 文本盒子 */

          .card-right-text {
            max-height: 76.8px; /* 根据实际情况调整 */
            margin: 2px 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 25px 0;

            .text-span {
              box-sizing: border-box;
              -webkit-line-clamp: 4;
              line-height: 1.2;   /* 行间距 */
              letter-spacing: 0.05em; /* 文字间距 */
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }

        /* 底部盒子 */

        .card-right-bottom-box {
          display: flex;
          align-items: center;
          //width: 100%;
          height: 31px;

          .time-n {
            display: flex;
            align-items: center;
            margin-left: 20px;

            & > .icon {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 1px;
              margin-right: 8px;
            }
          }

          .user-n {
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
              margin-right: 8px;
            }
          }
        }
      }
    }

    .side-bar-box {
      box-sizing: border-box;
      flex: 4;
      flex: 0 0 auto;
      margin-top: 20px;
      margin-left: 20px;
      backdrop-filter: blur(2px);

      .side-bar-sticky-box {
        // position: sticky;
        top: 20px;
      }

      .user-card {
        width: 100%;
        height: 340px;
        // height: 523px;
        background: #ffffffe5;
        border-radius: 8px;
        box-shadow: 0 0 10px rgb(231 198 198 / 76%);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
 
        &:hover {
          transform: translateY(-5px); /* 鼠标悬停时有轻微上浮效果 */
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影加深 */
        }

        .user-card-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .user-card-small-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;

            & > img {
              width: 120px;
              margin-top: 10px;
              border-radius: 50%;
              animation: kfrotate 10s ease-in-out infinite;
              // transition: transform 0.6s ease-in-out; /* 添加平滑过渡 */
            }

            // & > img:hover{
            //   transform: rotate(360deg); /* 鼠标悬停时旋转一圈 */
            // }

            @keyframes kfrotate {
              0% {
                transform: rotate(0deg); /* 初始位置 */
              }
              25% {
                transform: rotate(-15deg); /* 向左摇摆 */
              }
              50% {
                transform: rotate(0deg); /* 回到原位 */
              }
              75% {
                transform: rotate(15deg); /* 向右摇摆 */
              }
              100% {
                transform: rotate(0deg); /* 回到原位 */
              }
            }

            .name-box {
              margin: 15px 0;
              font-size: 20px;
              font-weight: 800;
            }

            .name-box:hover {
              color: #49b1f5;
            }

            .user-text {
              font-size: 15px;
              text-align: center;
              color: rgb(78, 68, 68);
            }

            .user-text:hover {
              color: #49b1f5;
            }

          }

          /* 标签盒子 */

          .social-tag {
            width: 100%;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            line-height: 35px;

            .social-tag-follow-me {
              background: #49b1f5;
              height: 100%;
              width: 75%;
              border-radius: 13px;
              color: white;
              font-weight: 800;
              user-select: none;
              transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加 box-shadow 的过渡 */ 
            }

            .social-tag-follow-me:hover{
              background: #f58195d7;
              transform: scale(1.1) translateY(-5px); /* 向上平移 5px */
              box-shadow: 0 4px 8px rgba(255, 15, 15, 0.315); /* 添加阴影效果 */
            }

            .social-tag-box {
              width: 75%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin-top: 20px;
              
              .icon{
                width: 25px;
                height: 25px;
                display: flex;
                justify-content: center;
                transition: transform 0.3s ease; 
              }

              .icon:hover{
                transform: scale(1.2);
              }
            }
          }
        }
      }

      .time-card {
        height: 98px; /* 增加卡片的高度，给内容更多空间 */
        width: 100%;
        background: linear-gradient(145deg, #ffffff, #f0f0f0);
        margin-top: 4%;
        border-radius: 10px; /* 更圆滑的边角 */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 卡片默认轻微阴影 */
        transition: box-shadow 0.3s ease, transform 0.3s ease;
        
        &:hover {
          transform: translateY(-8px); /* 增加悬停时的浮动效果 */
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* 更强的悬停阴影 */
        }
      
        /* 图片部分样式 */
        .time-card-img {
          width: 100%;
          height: 100%;
          position: absolute; /* 确保图片位于卡片的底层 */
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片填充容器，保持比例 */
            object-position: center center; /* 图片居中显示 */
            transition: transform 0.5s ease-in-out, filter 0.3s ease; /* 动画过渡效果 */
          }
      
          img:hover {
            transform: scale(1.1); /* 图片放大效果 */
            filter: brightness(0.8); /* 增加图片亮度变化，增强悬停效果 */
          }
        }
      
        /* 内容部分样式 */
        .time-card-box {
          position: absolute;
          z-index: 2; /* 使内容部分置于图片之上 */
          text-align: center;
          user-select: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 18px; /* 字体大小适中 */
          padding: 20px;
          font-weight: 600;
          color: #333333; /* 更深的文本颜色 */
          border-radius: 10px;
          background-color: rgba(255, 255, 255, 0.8); /* 半透明背景，使文字更加突出 */
          backdrop-filter: blur(5px); /* 背景模糊效果 */
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 内容区域的阴影 */
          border: 1px solid rgba(255, 255, 255, 0.6); /* 内容区域的边框 */
          width: 100%;
          height: 100%;
        }
      
        #date-time {
          font-size: 16px;
          color: #666666; /* 日期部分颜色稍浅 */
          margin-bottom: 5px; /* 日期和时间之间的间距 */
        }
      
        #time-time {
          font-size: 24px;
          color: #333333; /* 时间字体颜色较深 */
          font-weight: bold;
        }
      }
      
      /* 响应式优化 */
      @media (max-width: 768px) {
        .time-card {
          height: 150px;
          margin-top: 2%;
        }
      
        .time-card-box {
          padding: 15px;
          font-size: 16px;
        }
      
        #date-time {
          font-size: 14px;
        }
      
        #time-time {
          font-size: 22px;
        }
      }
      
      .home-notice {
        width: 100%;
        background: #ffffff;
        margin-top: 5%;
        padding: 20px 10px;
        box-sizing: border-box;
        border-radius: 12px; /* 调整卡片圆角 */
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
        overflow: hidden;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
      
        &:hover {
          transform: translateY(-5px); /* 鼠标悬停时有轻微上浮效果 */
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影加深 */
        }
      
        .home-notice-title {
          font-size: 24px;
          font-weight: 700;
          color: #333;
          text-align: center;
          padding-bottom: 15px;
          margin-bottom: 15px;
          border-bottom: 2px solid #ffb8b8; /* 添加底部边框 */
          letter-spacing: 1px; /* 增加字母间距 */
        }
      
        .home-notice-box {
          flex-grow: 1;
          padding: 10px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow-y: auto; /* 使公告内容可滚动 */
          
          ul {
            width: 100%;
            max-width: 600px; /* 最大宽度 */
            padding-left: 0;
            margin: 0;
          }
      
          li {
            width: 100%;
            margin-bottom: 15px;
            padding: 12px;
            background: #f7f7f7;
            border-radius: 8px;
            list-style: none;
            font-size: 16px;
            color: #555;
            font-weight: 500;
            transition: transform 0.3s ease, background-color 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
            &:hover {
              background-color: #ffb8b8; /* 鼠标悬停时背景色 */
              color: #fff; /* 文字颜色变白 */
              transform: translateX(5px); /* 鼠标悬停时略微移动 */
            }
      
            &:last-child {
              margin-bottom: 0; /* 最后一项去掉底边距 */
            }
          }
        }
      }
      
      
    }
  }

}

/* 固定右下角按钮容器 */
.floating-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

/* 公共按钮样式 */
.floating-buttons div {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: #ffb8b8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-buttons div:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

/* 回到顶部按钮 */
.scroll-to-top svg {
  fill: white;
}

/* 刷新页面按钮 */
.refresh-page svg {
  fill: white;
}

